<script setup lang="ts">
import VCharts from 'vue-echarts'
import { mockAxisChart, mockPieChart } from '@/mock'

const chart1 = mockAxisChart('bar', '销售部门在跑项目汇总', [
  '半导体事业部',
  '西北事业部',
  '业务一部',
  '业务二部',
])
const chart2 = mockAxisChart('bar', '项目阶段在跑项目汇总', [
  'POC',
  '实施阶段',
  '维保阶段',
  '销售价阶段',
  '暂停或终止',
])
const chart3 = mockPieChart('当前占用资源数量', ['未使用', '已使用'], 100)
const chart4 = mockPieChart('当前占用资源费用', ['未使用', '已使用'], 100000)
</script>

<template>
  <ElCard class="card is-flex">
    <template #header>
      <div class="header">
        <div class="title">
          在跑项目总金额：1550000
        </div>
        <div class="title">
          在跑项目累计计划人天：10000
        </div>
        <div class="title">
          在跑项目累计已用人天：5000
        </div>
        <div class="title">
          在跑项目累计可用人天：5000
        </div>
      </div>
    </template>

    <div class="chart-container">
      <div class="row">
        <VCharts
          class="chart"
          :autoresize="true"
          :option="chart1"
        />
        <VCharts
          class="chart"
          :autoresize="true"
          :option="chart2"
        />
      </div>

      <div class="row">
        <VCharts
          class="chart"
          :autoresize="true"
          :option="chart3"
        />
        <VCharts
          class="chart"
          :autoresize="true"
          :option="chart4"
        />
      </div>
    </div>
  </ElCard>
</template>

<style lang="scss" scoped>
.card {
  height: 100%;

  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;

    > :not(:first-child) {
      margin-left: 6%;
    }
  }

  .chart-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;

    .row {
      display: flex;
      flex: 1;
      align-items: center;

      .chart {
        height: 100%;
      }
    }

    .row + .row {
      margin-top: 10px;
    }
  }
}
</style>

<route lang="json5">
{
  "meta": {
    "index": 1,
    "title": "公司看板",
  },
}
</route>
